<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择你喜欢的书</title>
    <style>
        *{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
        div{padding: 5px; text-align: center;
        }
        div span{display: block;}
    </style>
</head>
<body>
<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>
<div><img src="" alt="" id="image" onclick="img()"><span></span></div>
<script>
    function book() {
        var books=document.getElementsByName("book");
        for (var i=0;i<books.length;i++){
            if (books[i].checked==true&&i==0){
                var img=document.createElement("img");
                img.setAttribute("onclick","img()");
                img.setAttribute("src","images/dog.jpg");
                document.getElementsByTagName("div")[0].appendChild(img);
            }else if (books[i].checked==true&&i==1){
                var img=document.createElement("img");
                img.setAttribute("onclick","img()");
                img.setAttribute("src","images/mai.jpg");
                document.getElementsByTagName("div")[0].appendChild(img);
            }
        }
    }

    function img() {
        var brand=document.getElementsByTagName("div")[0];
        var copy=brand.lastChild.cloneNode(false);
        brand.insertBefore(copy,brand.firstChild);
        //document.getElementsByTagName("div")[0].appendChild(copy);//尾部追加


    }
</script>
</body>
</html>